<template>
    <div>
      <!-- 子组件模板 -->
      <h3>子组件</h3>
      <div>
        <!-- 添加按钮触发自定义事件 -->
        <button @click="sendMessageToParent">发送消息给父组件</button>
        <button @click="incrementCounter">增加计数</button>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  /**
   * 自定义事件详解 - 子组件部分
   * 
   * 1. 概念：
   *    自定义事件是Vue中子组件向父组件传递数据的主要方式。
   *    通过触发事件，子组件可以向上传递数据，实现子到父的通信。
   * 
   * 2. 基本原理：
   *    - 子组件通过defineEmits定义可触发的事件
   *    - 子组件通过emit方法触发事件并传递数据
   *    - 父组件通过v-on(@)监听这些事件并执行相应的处理函数
   * 
   * 3. 在<script setup>中使用自定义事件：
   *    - 使用defineEmits宏函数声明要触发的事件
   *    - 可以使用数组语法或对象语法进行声明
   *    - TypeScript环境下可以使用类型标注增强类型安全
   */
  
  // 3.1 数组语法声明事件
  // const emit = defineEmits(['message', 'increment'])
  
  // 3.2 对象语法声明事件（可以进行运行时验证）
  // const emit = defineEmits({
  //   message: (payload: string) => {
  //     // 验证逻辑，返回true表示验证通过
  //     return payload.length > 0
  //   },
  //   increment: (count: number) => {
  //     return count >= 0
  //   }
  // })
  
  // 3.3 TypeScript类型声明（推荐）
  const emit = defineEmits<{
    // 事件名称: 参数类型
    (e: 'message', payload: string): void
    (e: 'increment', count: number): void
  }>()
  
  /**
   * 4. 触发事件的方法：
   *    - 使用emit函数触发事件
   *    - 第一个参数是事件名称
   *    - 后续参数是要传递给父组件的数据
   */
  function sendMessageToParent() {
    // 触发message事件，并传递一个字符串参数
    emit('message', '这是来自子组件的消息')
  }
  
  function incrementCounter() {
    // 触发increment事件，并传递数值1
    emit('increment', 1)
  }
  
  /**
   * 5. 自定义事件的命名规范：
   *    - 推荐使用kebab-case命名（如update-value）
   *    - 避免与原生DOM事件冲突
   *    - 事件名称应当表明其功能或传递的数据类型
   * 
   * 6. 注意事项：
   *    - 自定义事件是单向的，只能从子组件流向父组件
   *    - 事件名称对大小写不敏感，但推荐使用kebab-case
   *    - 可以传递多个参数，但建议使用对象封装复杂数据
   */
  </script>
  
  <style scoped>
  /* 子组件样式 */
  div {
    background: linear-gradient(to right, #f6d365, #fda085);
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  div:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
  
  h3 {
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 15px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    font-weight: 500;
    letter-spacing: 1px;
  }

  button {
    background-color: white;
    color: #ff7e5f;
    border: none;
    padding: 10px 15px;
    margin-right: 10px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }

  button:hover {
    background-color: #ff7e5f;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
  </style>